<template style="height:100%;">
  <div class="wrap">
    <div class="head">
      <div class="top" style="justify-content: space-between">
        <div class="dispatch_no">{{detail.dispatch_no}}</div>
        <div class="status">
          <span v-if='detail.dispatch_status ==20'>已审核</span>
          <span v-else-if='detail.dispatch_status ==30'>已发车</span>
          <span v-else-if='detail.dispatch_status ==35'>已到厂</span>
          <span v-else-if='detail.dispatch_status ==40'>已装货</span>
          <span v-else-if='detail.dispatch_status ==45'>已抵达</span>
          <span v-else-if='detail.dispatch_status ==50'>已卸货</span>
          <span v-else-if='detail.dispatch_status ==60'>完成</span>
        </div>
      </div>
      <div class="site_wrap">
        <div class="left">
          {{detail.shipper_city}}
        </div>
        <div class="center">
          <div class="customer_name">{{detail.customer_name}}</div>
          <img class="bar" src="../../static/images/icon/flow_to.png" />
          <div class="require_time_to">{{detail.require_time_to}}</div>
        </div>
        <div class="right">
          {{detail.consignee_city}}
        </div>
      </div>
    </div>
    <div class="head_wrap">
      <div class="child">
        <div class="top">{{detail.plan_amount}}T</div>
        <div class="bottom">计划量</div>
      </div>
      <div class="xian"></div>
      <div class="child">
        <div class="top" v-if="detail.load_amount">{{detail.load_amount}}T</div>
        <div class="top" style="color:#ffa500" v-if="!detail.load_amount">待装</div>
        <div class="bottom">装货量</div>
      </div>
      <div class="xian"></div>
      <div class="child">
        <div class="top" v-if="detail.unload_amount">{{detail.unload_amount}}T</div>
        <div class="top" style="color:#ffa500" v-if="!detail.unload_amount">待装</div>
        <div class="bottom">卸货量</div>
      </div>
    </div>
    <div class="main">

      <div class="child" v-if="needShow">
        <div class="top" @click="nine_button_click('清罐')" v-if="!parseInt(detail.is_already_clean_pot)">
          <img src="../../static/images/icon/clean_pot.png" />
        </div>
        <div class="top" @click="nine_button_click('清罐')" v-if="parseInt(detail.is_already_clean_pot)">
          <img src="../../static/images/icon/clean_pot_done.png" />
        </div>
        <div class="bottom">清罐</div>
      </div>
      <div class="child" v-if="needShow">
        <div class="top" @click="nine_button_click('发车')" v-if="!parseInt(detail.depart_time)">
          <img src="../../static/images/icon/dispatched.png" />
        </div>
        <div class="top" @click="nine_button_click('发车')" v-if="parseInt(detail.depart_time)">
          <img src="../../static/images/icon/dispatched_done.png" />
        </div>
        <div class="bottom">发车</div>
      </div>
      <div class="child" v-if="needShow">
        <div class="top" @click="nine_button_click('到厂')" v-if="!detail.arrive_load_time">
          <img src="../../static/images/icon/arrive_load.png" />
        </div>
        <div class="top" @click="nine_button_click('到厂')" v-if="detail.arrive_load_time">
          <img src="../../static/images/icon/arrive_load_done.png" />
        </div>
        <div class="bottom">到厂</div>
      </div>
      <div class="child">
        <div class="top" @click="nine_button_click('装车')" v-if="!parseInt(detail.load_time)">
          <img src="../../static/images/icon/load.png" />
        </div>
        <div class="top" @click="nine_button_click('装车')" v-if="parseInt(detail.load_time)">
          <img src="../../static/images/icon/load_done.png" />
        </div>
        <div class="bottom">装车</div>
      </div>
      <div class="child" v-if="needShow">
        <div class="top" @click="nine_button_click('铅封')" v-if="!parseInt(detail.is_seal)">
          <img src="../../static/images/icon/seal.png" />
        </div>
        <div class="top" @click="nine_button_click('铅封')" v-if="parseInt(detail.is_seal)">
          <img src="../../static/images/icon/seal_done.png" />
        </div>
        <div class="bottom">铅封</div>
      </div>
      <div class="child" v-if="needShow">
        <div class="top" @click="nine_button_click('抵达')" v-if="!parseInt(detail.arrive_unload_time)">
          <img src="../../static/images/icon/arrive_unload.png" />
        </div>
        <div class="top" @click="nine_button_click('抵达')" v-if="parseInt(detail.arrive_unload_time)">
          <img src="../../static/images/icon/arrive_unload_done.png" />
        </div>
        <div class="bottom">抵达</div>
      </div>
      <div class="child" v-if="needShow">
        <div class="top" @click="nine_button_click('取样')" v-if="!parseInt(detail.is_sample)">
          <img src="../../static/images/icon/sample.png" />
        </div>
        <div class="top" @click="nine_button_click('取样')" v-if="parseInt(detail.is_sample)">
          <img src="../../static/images/icon/sample_done.png" />
        </div>
        <div class="bottom">取样</div>
      </div>
      <div class="child">
        <div class="top" @click="nine_button_click('卸车')" v-if="!parseInt(detail.unload_time)">
          <img src="../../static/images/icon/unload.png" />
        </div>
        <div class="top" @click="nine_button_click('卸车')" v-if="parseInt(detail.unload_time)">
          <img src="../../static/images/icon/unload_done.png" />
        </div>
        <div class="bottom">卸车</div>
      </div>
      <div class="child">
        <div class="top" @click="nine_button_click('在途反馈')">
          <img src="../../static/images/icon/intransit.png" />
        </div>
        <div class="bottom">在途反馈</div>
      </div>
    </div>
    <div class="remark" v-if="detail.is_clean_pot && detail.is_clean_pot != '0'">
      <img style="position:relative;top:-0.07rem;" src="../../static/images/icon/remark.png" />
      <div>装货前需要清罐</div>
      <div v-if="!parseInt(detail.is_already_clean_pot)" style="color:#ffa500;">待清罐审核</div>
      <div v-if="parseInt(detail.is_already_clean_pot)" style="color:#ffa500;">已清罐</div>
    </div>
    <!-- 备注和路线 -->
    <div class="shoukuan" v-if="detail.remark" style="padding-left:1.045rem;" >
      {{detail.remark}}
    </div>
    <div v-if="detail.line_request" style="display:flex;align-items: center;padding:0 0 .1rem 0.05rem;">
      <img style=" height: 0.625rem;margin:0 0.2rem;" src="../../static/images/home/route.png">{{detail.line_request}}
    </div>
    <div v-if="detail.receivables_way=='10'&&detail.receivable_cost>0" class="shoukuan">
      <div>运费根据{{formatLoad(detail.charge_node)}}计算,运费
        <button @click="nine_button_click('收款')" class="button">收款</button>
      </div>
      <div>
        <span style="color:#ffa500;">{{detail.receivable_cost}}元</span>,已收
        <span>{{detail.sum_receivable_cost}}</span>元</div>
    </div>
  </div>
</template>

<script>
  import {
    MessageBox
  } from 'mint-ui';
  export default {
    name: 'index',
    data() {
      return {
        dispatch_no: '',
        company_id: null,
        selected: 'tab1',
        detail: {},
        needShow: true //判断是显示9个还是3个
      }
    },
    methods: {
      nine_button_click: function (type) {
        sessionStorage.setItem('nineParams', JSON.stringify(this.detail))
        //在这里做接下去的跳转路由事件
        switch (type) {
          case '清罐':
            if (!this.detail.is_clean_pot || this.detail.is_clean_pot == '0') {
              MessageBox.alert('不需要清罐', '提示');
              return false;
            };
            this.$router.push({
              'name': 'nine1',
            })
            break;
          case '发车':
            MessageBox.alert('已发车,无需重复操作', '提示');
            break;
          case '到厂':
            this.$router.push({
              'name': 'nine3',
            })
            break;
          case '装车':
            this.$router.push({
              'name': 'nine4',
            })
            break;
          case '铅封':
            this.$router.push({
              'name': 'nine5',
            })
            break;
          case '抵达':
            this.$router.push({
              'name': 'nine6',
            })
            break;
          case '取样':
            this.$router.push({
              'name': 'nine7',
            })
            break;
          case '卸车':
            this.$router.push({
              'name': 'nine8',
            })
            break;
          case '在途反馈':
            this.$router.push({
              'name': 'nine9',
            })
            break;
          case '收款':
            this.$router.push({
              'name': 'nine10',
            })
            break;
        }
      },
      formatLoad(state) {
        if (state == 'load') {
          return "装货磅重";
        } else {
          return "卸货磅重";
        }
      }
    },
    created() {
      var params = JSON.parse(sessionStorage.getItem('nine')),
        loginData = JSON.parse(sessionStorage.getItem('loginData'));
      if (loginData.carrier != 'shuguang' && loginData.carrier_name != '曙光物流车队') {
        // this.needShow = false
      }
      var that = this;
      this.$api.post('/wechat/getDispatchOrderByNo', params, function (data) {
        that.detail = data.obj;
      })
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  li {
    list-style-type: none;
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  .wrap {
    background: #3B8CE7;
    height: 5.6rem;
    padding: 0.2rem 0;
  }

  .top {
    display: flex;
    border-bottom: 1px solid white;
    padding-bottom: 0.177rem;
  }

  .top .dispatch_no {
    color: white;
    font-size: 0.4rem;
    height: 0.6rem;
    line-height: 0.6rem;
    margin-left: 0.4rem;
  }

  .top .status {
    background-image: url(../../static/images/icon/status.png);
    color: #3B8CE7;
    padding: 0.1rem;
    width: 2rem;
    height: 0.5rem;
    line-height: 0.3rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 0.1rem;
    margin-right: 0.8rem;
  }

  .site_wrap {
    display: flex;
    display: -webkit-flex;
    color: white;
    justify-content: space-between;
    margin: 0.38rem 0;
  }

  .site_wrap .left,
  .site_wrap .right {
    width: 2rem;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
  }

  .site_wrap .right {
    width: 2rem;
  }

  .site_wrap .center {
    width: 5.4rem;
    display: flex;
    flex-direction: column;
  }

  .site_wrap .center .bar {
    width: 100%;
  }

  .site_wrap .center .customer_name {
    height: 0.5rem;
    line-height: 0.5rem;
  }

  .site_wrap .center .require_time_to {
    height: 0.7rem;
    line-height: 0.7rem;
  }

  .main {
    width: 100%;

    background: white;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    padding: 0rem 1.1rem 0.3rem;
    flex-wrap: wrap;
    height: 8rem;

    position: relative;
  }

  .head_wrap {
    width: 8.4rem;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    margin-left: 0.8rem;
    padding: 0.2rem 0.3rem;
    background: white;
    justify-content: space-between;
    border-radius: 0.3rem 0.3rem 0 0;
  }

  .head_wrap .child {
    margin-top: 0;
  }

  .head_wrap .xian {
    width: 1px;
    border-right: 1px solid #ccc;
    height: 1rem;
  }

  .child {
    display: flex;
    width: 1.8rem;
    margin: 0 0.2rem;
    display: -webkit-flex;
    flex-direction: column;
    margin-top: 0.09rem;
  }

  .child .top {
    width: 100%;
    display: flex;
    padding-bottom: 0.11rem;
    justify-content: center;
  }

  .top img {
    width: 100%;
    height: 1.8rem;
  }

  .remark {
    display: flex;
  }

  .remark img {
    height: 0.6rem;
    margin: 0 0.2rem;
  }

  .remark div {
    margin-right: 0.3rem;
  }

  .shoukuan {
    text-align: left;
    padding-left: 1rem;
    line-height: 0.5rem;
  }

  .button {
    padding: 0.2rem 0.5rem;
    float: right;
    border: none;
    font-size: 0.4rem;
    border-radius: 0.2rem;
    margin-right: 0.3rem;
    background: #3b8ce7;
    color: white;
  }

</style>
